<template>
<div id="query">
    <el-form :inline="true" ref="queryFormRef" :model="queryFormModel">
      <el-form-item label="预警名称">
        <el-input v-model="queryFormModel.warningTitle" @keyup.native.enter="onQuery"></el-input>
      </el-form-item>
      <el-form-item label="预警类型">
        <el-select v-model="queryFormModel.warningType"  @change="onQuery" placeholder="请选择">
          <el-option label="全部类型" value=""></el-option>
          <el-option label="预警提示" value="WaitReadingTask"></el-option>
          <el-option label="预警待办" value="WaitDoingTask"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-select v-model="queryFormModel.activated" @change="onQuery" placeholder="请选择">
          <el-option label="启动&禁用" :value="-1"></el-option>
          <el-option label="启动" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item> -->
    </el-form>

    <el-table :data="warnResultTable" :row-class-name="tableRowClassName" border>
      <el-table-column prop="warningTitle" label="预警名称" header-align="center">
      </el-table-column>
      <el-table-column prop="warningType" label="预警类型" header-align="center">
      </el-table-column>
      <el-table-column prop="activated" label="启用状态" header-align="center">
      </el-table-column>
      <el-table-column label="操作" header-align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="edit(scope.row)"  v-show="scope.row.warningTitle!=undefined">
              <span>编辑</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-size="queryFormModel.size" layout="total,prev, pager, next"
                   :total="pageTotalSize" @current-change="paginateChange" :current-page.sync="queryFormModel.page">
    </el-pagination>

    <el-dialog id="settingDialog" title="预警参数设置" :visible.sync="editDialogVisible" :before-close="closeDialog">
        <el-form ref="editFormRef" :model="editForm" label-width="120px">
          <el-form-item label="预警名称">
            <el-input v-model="editForm.warningTitle" readonly></el-input>
          </el-form-item>
          <el-form-item label="预警类型">
            <el-select v-model="editForm.warningType" placeholder="请选择">
              <el-option label="预警提示" value="WaitReadingTask"></el-option>
              <el-option label="预警待办" value="WaitDoingTask"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="8"></el-col>
          </el-row> -->
          <el-form-item label="启用状态">
            <el-switch v-model="editForm.activated"></el-switch>
          </el-form-item>
          <el-form-item label="阈值"  v-show="showThreshold">
            <el-input v-model="editForm.threshold"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="margin-left:auto;margin-right:auto;width:200px;">
            <el-button type="primary" @click="save('editFormRef')">保存</el-button>
            <el-button @click="closeDialog">取消</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
  import sysurl from '@/config/sys-url'
  export default {
    name: 'warnquery',
    data() {
      return {
        //activated:-1 表示选择启用&禁用
        queryFormModel:{
          warningTitle:"",
          warningType:"",
          activated:-1,
          page:1,
          size:10
        },

        // {
        //   warningTitle: "",
        //   warningType: "",
        //   activated: ""
        // }
        warnResultTable:[],
        pageTotalSize:0,

        //修改框
        editDialogVisible:false,
        //是否显示阈值框
        showThreshold: true,
        editForm:{
          jobMasterId:1,
          warningTitle:"",
          warningType:"",
          activated:true,
          threshold:0,
          version:1
        }
      }
    },
    methods: {
      //主页查询
      onQuery() {
        this.warnResultTable=[];

        const url = sysurl.query;
        const that = this;

        const param = this.$qs.stringify(this.queryFormModel);
        // console.log(param);
        this.$http.post(url,param)
        .then(res => {
          // console.log(res.data.data);
          var result =  res.data.data;
          that.pageTotalSize = result.total;
          that.warnResultTable = result.elements;
        })
        .catch(err => {
          console.log(err);
        })
      },

      //主页编辑
      edit(row) {
          //防止误点
          if(row.jobMasterId==undefined){
            return;
          }

          const that = this;
          const jobId = row.jobMasterId;

          const url = sysurl.edit+jobId;
          this.$http.get(url)
            .then(res => {
                //显示dialog
                that.editDialogVisible = true;

                var result = res.data;
                that.editForm = result.data;
                if (that.editForm.hasOwnProperty('threshold')) {
                    that.showThreshold = true;
                }else{
                  that.showThreshold = false;
                }
            })
            .catch(error => {
              console.log(err)
            })
      },//end edit
      //保存
      save(){
        const $this =this;
        const $editForm = this.editForm;
        $editForm.version+=1;//TODO 这里可能有逻辑问题
        //console.log($editForm);
        this.$http.post(sysurl.save,$editForm)
          .then(res => {
            // console.log("【保存方法】返回成功",res);
             if (res.data.code==0) {
               //没问题，关闭POPUP
              $this.closeDialog();
              //关闭后刷新表格
              $this.onQuery();
             }else{
               //弹框提示用户因为什么原因更新失败，popup不关闭
             }
          })
          .catch(error => {
            console.log(err)
          })
      },//end save


      paginateChange:function(currentPage){
           this.onQuery();
       },

      closeDialog(){
        this.editDialogVisible=false;
      },

      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },//end tableRowClassName
    },//end methods
    created(){
      this.onQuery();
    }
  }
</script>


<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-select {
  float: left;
}
.el-switch {
  float: left;
  margin-top: 10px;
}

.el-form-item__label {
  font-weight: lighter;
}
</style>
